<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员专享</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        .max-w-750 { max-width: 750px; }
        .nav-tab.active { color: #3b82f6; }
        .nav-tab.active i { color: #3b82f6; }
    </style>
</head>
<body class="bg-gray-50 min-h-screen pb-20">
    <!-- 顶部导航 -->
    <div class="bg-white shadow-sm sticky top-0 z-10">
        <div class="max-w-750 mx-auto px-4 py-3 flex items-center justify-between">
            <h1 class="text-lg font-semibold text-gray-800">会员专享</h1>
            <div class="flex items-center space-x-3">
                <i class="fas fa-bell text-gray-500 text-lg"></i>
                <i class="fas fa-cog text-gray-500 text-lg"></i>
            </div>
        </div>
    </div>

    <div class="max-w-750 mx-auto px-4 py-4">
        <!-- 会员等级卡片 -->
        <div class="bg-gradient-to-r from-yellow-400 to-orange-500 rounded-2xl p-6 mb-6 text-white">
            <div class="flex items-center justify-between">
                <div>
                    <div class="flex items-center mb-2">
                        <i class="fas fa-crown text-2xl mr-3"></i>
                        <div>
                            <h2 class="text-xl font-bold">黄金会员</h2>
                            <p class="text-sm">尊享专属权益</p>
                        </div>
                    </div>
                    <div class="flex items-center space-x-4">
                        <div class="text-center">
                            <div class="text-lg font-bold">365</div>
                            <div class="text-xs">剩余天数</div>
                        </div>
                        <div class="text-center">
                            <div class="text-lg font-bold">8.5</div>
                            <div class="text-xs">会员折扣</div>
                        </div>
                    </div>
                </div>
                <button class="bg-white text-orange-500 px-4 py-2 rounded-lg font-semibold">
                    续费升级
                </button>
            </div>
        </div>

        <!-- 专属权益 -->
        <div class="bg-white rounded-xl shadow-md p-5 mb-6">
            <h3 class="text-lg font-semibold mb-4 text-gray-700">专属权益</h3>
            <div class="grid grid-cols-2 gap-4">
                <div class="bg-blue-50 rounded-xl p-4">
                    <i class="fas fa-percentage text-blue-500 text-xl mb-2"></i>
                    <h4 class="font-semibold text-gray-800">专属折扣</h4>
                    <p class="text-xs text-gray-600">全场8.5折优惠</p>
                </div>
                <div class="bg-green-50 rounded-xl p-4">
                    <i class="fas fa-headset text-green-500 text-xl mb-2"></i>
                    <h4 class="font-semibold text-gray-800">专属客服</h4>
                    <p class="text-xs text-gray-600">7×24小时服务</p>
                </div>
            </div>
        </div>

        <!-- 专属活动 -->
        <div class="bg-white rounded-xl shadow-md p-5 mb-6">
            <h3 class="text-lg font-semibold mb-4 text-gray-700">专属活动</h3>
            <div class="space-y-4">
                <div class="bg-gradient-to-r from-pink-500 to-red-500 rounded-xl p-4 text-white">
                    <h4 class="font-semibold">会员专享大礼包</h4>
                    <p class="text-sm">新会员专享，价值299元</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 flex justify-around py-2 max-w-750 mx-auto">
        <a href="user-home.html" class="nav-tab flex flex-col items-center px-4 py-1 text-xs text-gray-500">
            <i class="fas fa-home text-lg mb-1"></i>
            <span>首页</span>
        </a>
        <a href="categories.html" class="nav-tab flex flex-col items-center px-4 py-1 text-xs text-gray-500">
            <i class="fas fa-list text-lg mb-1"></i>
            <span>分类</span>
        </a>
        <a href="member-exclusive.html" class="nav-tab active flex flex-col items-center px-4 py-1 text-xs">
            <i class="fas fa-crown text-lg mb-1"></i>
            <span>会员专享</span>
        </a>
        <a href="../class/business-school.html" class="nav-tab flex flex-col items-center px-4 py-1 text-xs text-gray-500">
            <i class="fas fa-graduation-cap text-lg mb-1"></i>
            <span>商学院</span>
        </a>
        <a href="user-profile.html" class="nav-tab flex flex-col items-center px-4 py-1 text-xs text-gray-500">
            <i class="fas fa-user text-lg mb-1"></i>
            <span>我的</span>
        </a>
    </div>
</body>
</html> 